﻿<template>
  <div class="station-view-page">
    <a-spin :spinning="loading">
      <div class="top-blcok">
        <search-form ref="search" :loading.sync="loading" @search="onSearch" />
      </div>
      <div class="containter-blcok">
        <div class="example-tags">
          <div class="tag tan-tag">空闲</div>
          <div class="tag orange-tag">待入</div>
          <div class="tag purple-tag">待出</div>
          <div class="tag primary-tag">存货</div>
          <div class="tag red-tag">停用</div>
        </div>
        <!-- 工位显示区域 start -->
        <div class="stations-box">
          <div class="station-item-group">
            <div class="station-item" v-for="(item,index) in list" :key="'station-item-'+index" :class="[
              (!item||item.status===undefined||item.status===null||item.status===2)?'died-item':(
                item.status===1?'red-item':(
                  item.stataionStatus===2?'orange-item':(
                    item.stataionStatus===4?'purple-item':(
                      item.stataionStatus===1?'tan-item':(
                        item.stataionStatus===3?'primary-item':''
                      )
                    )
                  )
                )
              )
            ]" @click="openDetail(item)">
              {{item?item.name:''}}
            </div> 
          </div> 
        </div>
        <!-- 库区显示区域 end -->
      </div>
      
      <detail-drawer :visible.sync="detailVisible" :row="detailRow" @callback="lockCallback" />
    </a-spin>
  </div>
</template>

<script>
import SearchForm from './SearchForm.vue'
import DetailDrawer from './DetailDrawer.vue'
import { GetStationList } from '@/api/modular/main/StationViewManage'
export default {
  name:'stationViewPage',
  components:{SearchForm,DetailDrawer},
  data(){
    return {
      detailVisible:false,
      detailRow:{},
      loading:false,
      countNum: {
        empty: 0,
        daiRu: 0,
        daiChu: 0,
        fill: 0,
        lock: 0,
        emptyContainer:0
      },
      list:[],
      searchForm:{}
    }
  },
  methods:{
    openDetail(obj){
      this.detailRow = obj
      this.detailVisible = true;
    },
    getList(id,callback){
      GetStationList(id).then((d)=>{
        this.list = d.data || []
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    onSearch(valObj) {
      this.loading = true
      this.searchForm = valObj
      this.getList(valObj,()=>{
        this.loading = false
      })
    },
    lockCallback(){
      this.loading = true
      this.getList(this.searchForm,()=>{
        this.loading = false
      })
    },
    init(){
      this.loading = true
      this.$refs.search.init((f,val)=>{
        if (f) {
          this.getList(val,()=>{
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    }
  },
  mounted(){
    this.init()
  }
}
</script>

<style lang="less" scoped>
.station-view-page{
  overflow: hidden;
  display: flex;
  overflow: auto;
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  height: 100%;
  
  .top-blcok {
    flex-shrink: 0;
    padding: 10px 16px 16px 16px;
  }
  
  .containter-blcok {
    flex-grow: 1;
    height: 1px;
    display: flex;
    flex-direction: column;
    @gray-color: #808080;
    @danger-color: #ff3333;
    @primary-color: #ccffff;
    @orange-color: #ffa500;
    @purple-color: #800080;
    @tan-color: #d2b48c;
    @border-color-x: #c0c0c0;
  
    .example-tags {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 16px 16px 16px;
  
      .tag {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        width: 100px;
        border: 1px solid @border-color-x;
        border-radius: 4px;
        cursor: default;
        background-color: @gray-color;
  
        &+.tag {
          margin-left: 10px;
        }
  
        &.red-tag {
          background-color: @danger-color;
        }
  
        &.primary-tag {
          background-color: @primary-color;
        }
  
        &.orange-tag {
          background-color: @orange-color;
        }
  
        &.purple-tag {
          background-color: @purple-color;
        }
        
        &.tan-tag{
          background-color: @tan-color;
        }
  
        &:not(.primary-tag) {
          color: #FFFFFF;
        }
      }
    }
  
    .stations-box {
      @divider-size:8px;
      flex-grow: 1;
      height: 1px;
      overflow: auto;
      .station-item-group{
        display: flex;
        flex-wrap: wrap;
        padding-left: @divider-size;
      }
      .station-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 50px;
        overflow: hidden;
        white-space: nowrap;
        margin-right: @divider-size;
        margin-bottom: @divider-size;
        border: 1px solid @border-color-x;
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        background-color: @gray-color;
      
        &.active {
          box-shadow: 0 0 4px #00ff00;
        }
        
        &.died-item {
          background-color: #FFFFFF;
          background-image: linear-gradient(
          	to top right,
          	rgba(192, 192, 192, 0) 0%,
          	rgba(192, 192, 192, 0) calc(50% - 1px),
          	rgba(192, 192, 192, 1) 50%,
          	rgba(192, 192, 192, 0) calc(50% + 1px),
          	rgba(192, 192, 192, 0) 100%
          ), linear-gradient(
          	to bottom right,
          	rgba(192, 192, 192, 0) 0%,
          	rgba(192, 192, 192, 0) calc(50% - 1px),
          	rgba(192, 192, 192, 1) 50%,
          	rgba(192, 192, 192, 0) calc(50% + 1px),
          	rgba(192, 192, 192, 0) 100%
          );
          cursor: not-allowed;
        }
        
        &.red-item {
          background-color: @danger-color;
        }
        
        &.primary-item {
          background-color: @primary-color;
        }
        
        &.orange-item {
          background-color: @orange-color;
        }
        
        &.purple-item {
          background-color: @purple-color;
        }
        
        &.tan-item{
          background-color: @tan-color;
        }
        
        &:not(.primary-item,.died-item) {
          color: #FFFFFF;
        }
        
      }
    }
  }
}
</style>
<style lang="less">
.station-view-page{
  .ant-spin-nested-loading,.ant-spin-container{
    height:100%;
  }
  .ant-spin-container{
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}
</style>
